<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">车辆名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入车辆名称" value="" class="layui-input">
                <tip>填车辆的名称。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">车辆价格</label>
            <div class="layui-input-block">
                <input type="number" name="price" lay-verify="required" lay-reqtext="价格不能为空" placeholder="请输入价格" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">车型</label>
            <div class="layui-input-block">
                <div class="layui-input-block">
                    <select name="carType" lay-filter="aihao" id="carTypeId">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">车图片</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button><input class="layui-upload-file" type="file" accept="" name="file">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 80px">
                    <input type="hidden" id="photoId" name="photo">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""><span class="layui-progress-text"></span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            upload = layui.upload,
            $ = layui.$;

        // 文件上传初始化
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: 'file/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                console.log(res)
                var imgUrl = res.baseUrl+res.name
                $("#demo1").attr("src",imgUrl);
                $("#photoId").attr("value",res.name);
                alert("图片上传成功")
            }
            ,error: function(){
                //请求异常回调
            }
        });
        //调用加载下拉框
        loadSelect();




        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */

        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
           // 发送ajax到服务端
            console.log(data)
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });

        function loadSelect(){
            var carTypeValue = sessionStorage.getItem("config_car_type");
            if (!carTypeValue){
                $.get("configInfo/config_car_type", function(res){
                    if (res.code == 200){
                        sessionStorage.setItem("config_car_type", res.data)
                        res.data.split(',').forEach(item => {
                            console.log(item)
                            var optionItem = '<option value="'+item+'">'+item+'</option>'
                            $("#carTypeId").append(optionItem);
                        })
                        form.render('select');
                    }else {
                        alert("参数错误")
                    }
                });
            }else {
                carTypeValue.split(',').forEach(item => {
                    var optionItem = '<option value="'+item+'">'+item+'</option>'
                    $("#carTypeId").append(optionItem);
                })
                form.render('select');
            }
        }

    });
</script>
